<template>
  <div class="home-container">
    <z-row :span="24" :gutter="7.5" class="home-container-top">
      <z-col :span="5"
        ><box-container>
          <top-one title="历史累计放款" money="33,33,120,000.00" url="01.png" />
        </box-container>
      </z-col>
      <z-col :span="5"
        ><box-container>
          <top-one
            title="本年累计放款"
            money="33,33,120,000.00"
            url="02.png"
          /> </box-container
      ></z-col>
      <z-col :span="5"
        ><box-container>
          <top-one
            title="本年累计利息收入"
            money="33,33,120,000.00"
            url="03.png"
            rete="5.21"
          /> </box-container
      ></z-col>
      <z-col :span="5"
        ><box-container>
          <top-one
            title="总服务客户数"
            money="33,33,120,000.00"
            url="04.png"
            rete="5.21"
          /> </box-container
      ></z-col>
      <z-col :span="5"
        ><box-container>
          <top-one
            title="件均放款量统计"
            money="33,33,120,000.00"
            url="05.png"
            rete="5.21"
          /> </box-container
      ></z-col>
    </z-row>
    <!-- 间距 2.2 -->
    <z-row :gutter="7.5" style="height: 87%">
      <!-- -->
      <!-- 左 -->
      <z-col :span="6">
        <div class="echartList">
          <div class="chart-item2">
            <box-container boxTitle="进件详情">
              <Incoming />
            </box-container>
          </div>
          <div class="chart-item">
            <box-container boxTitle="部门业绩">
              <word-chart />
            </box-container>
          </div>
        </div>
      </z-col>
      <!-- 中 -->
      <z-col :span="12">
        <div class="echartList">
          <!-- <z-row :gutter="15" style="height: 17.8%; width: 100%">
            <z-col :span="12">
              <div class="chart-itemsa">
                <box-container>
                  <top-one />
                </box-container>
              </div>
            </z-col>
            <z-col :span="12">
              <div class="chart-itemsa">
                <box-container>
                  <top-one />
                </box-container>
              </div>
            </z-col>
          </z-row> -->

          <div class="chart-item2">
            <box-container boxTitle="资金分布情况">
              <scatter-map
            /></box-container>
          </div>
          <div class="chart-item">
            <box-container boxTitle="放回款详情">
              <line-chart />
            </box-container>
          </div>
        </div>
      </z-col>
      <!-- 右 -->
      <z-col :span="6">
        <div class="echartList">
          <!-- <div class="rightOne">
            <box-container>
              <top-one />
            </box-container>
          </div> -->
          <div class="chart-item">
            <box-container boxTitle="客户类型">
              <liquid-chart />
            </box-container>
          </div>
          <div class="chart-item2">
            <box-container boxTitle="产品类型">
              <type-count />
            </box-container>
          </div>
        </div>
      </z-col>
    </z-row>
  </div>
</template>

<script>
import { ZRow, ZCol } from "@UI/components";
import boxContainer from "@/components/boxContainer/index";
import fourAngel from "@/components/fourAngel/index";
import countTo from "@/components/countTo/index";
import {
  cityCount,
  typeCount,
  scatterMap,
  wordChart,
  funnelChart,
  lineChart,
  liquidChart,
  topOne,
  Incoming,
} from "./components";
// import topOne from "./components/topOne"
import useResize from "@/componentApi/useResize.js";
import { ref } from "vue";

export default {
  name: "homepage",
  components: {
    ZRow,
    ZCol,
    boxContainer,
    cityCount,
    typeCount,
    scatterMap,
    wordChart,
    funnelChart,
    lineChart,
    liquidChart,
    fourAngel,
    countTo,
    topOne,
    Incoming,
  },
  setup(props, context) {
    const { year, sum } = useResize();

    return {
      year,
      sum,
    };
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  position: relative;

  .echartList {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
}
// 底部  左   底部的间距 1.5%

.chart-item2 {
  height: 64%;
  width: 100%;
}

.chart-item {
  height: 34.5%;
  width: 100%;
}

.chart-itemsa {
  height: 100%;
  width: 100%;
}

.conter_3 {
  height: 46.4%;
  width: 100%;
}
.conter_4 {
  height: 32.1%;
  width: 100%;
}
.rightOne {
  height: 17.8%;
  width: 100%;
}
.rightTwo {
  height: 27.1%;
  width: 100%;
}
.rightThree {
  height: 51.4%;
  width: 100%;
}
.home-container-top {
  height: 13%;
  display: flex;
}
</style>
